<template>
  <view class="wrap">
    <u-collapse :head-style="headStyle">
      <u-collapse-item
        :title="'场地   ' + item.name"
        v-for="(item, index) in list"
        :key="index"
      >
        <u-cell-item title="场地ID" :value="item.id"></u-cell-item>
        <u-cell-item title="场地名称" :value="item.name"></u-cell-item>
        <u-cell-item title="场地所在地" :value="item.location"></u-cell-item>
        <u-cell-item title="场地大小" :value="item.size"></u-cell-item>
        <u-cell-item title="容纳人数" :value="item.num"></u-cell-item>
        <u-cell-item title="容纳球队数量" :value="item.teamNum"></u-cell-item>
        <view>
          <view class="btn">
            <u-button
              type="warning"
              shape="circle"
              plain
              @click="showUpdateSpace(item)"
              >修改</u-button
            >
          </view>
          <view class="btn">
            <u-button
              type="error"
              shape="circle"
              plain
              @click="showDeleteSpace(item.id)"
              >删除</u-button
            >
          </view>
        </view>
      </u-collapse-item>
    </u-collapse>
    <!-- 加载更多 -->
    <u-loadmore :status="status" @loadmore="load" />
    <u-button type="success" @click="addSpaceShow = true">添加场地</u-button>
    <!-- 添加场地信息 -->
    <u-popup v-model="addSpaceShow" mode="bottom" border-radius="10" closeable>
      <view class="addSpaceForm">
        <u-form
          :model="addSpaceForm"
          ref="addSpaceFormRef"
          :error-type="['message']"
        >
          <u-form-item label="场地名称" prop="name" label-width="150rpx">
            <u-input v-model="addSpaceForm.name"></u-input>
          </u-form-item>
          <u-form-item label="所在地" prop="location" label-width="150rpx">
            <u-input v-model="addSpaceForm.location"></u-input>
          </u-form-item>
          <u-form-item label="容纳人数" prop="num" label-width="150rpx">
            <u-input type="number" v-model="addSpaceForm.num"></u-input>
          </u-form-item>
          <u-form-item label="场地大小" prop="size" label-width="150rpx">
            <u-input type="number" v-model="addSpaceForm.size"></u-input>
          </u-form-item>
          <u-form-item label="容纳球队数量" prop="teamNum" label-width="200rpx">
            <u-input type="number" v-model="addSpaceForm.teamNum"></u-input>
          </u-form-item>
          <u-button
            type="primary"
            shape="circle"
            :ripple="true"
            @click="addSpace"
            >提交</u-button
          >
        </u-form>
      </view>
    </u-popup>
    <!-- 修改场地信息 -->
    <u-popup
      v-model="updateSpaceShow"
      mode="bottom"
      border-radius="10"
      closeable
    >
      <view class="updateSpaceForm">
        <u-form
          :model="updateSpaceForm"
          ref="updateSpaceFormRef"
          :error-type="['message']"
        >
          <u-form-item label="场地名称" label-width="150rpx">
            <u-input v-model="updateSpaceForm.name"></u-input>
          </u-form-item>
          <u-form-item label="场地所在地" label-width="150rpx">
            <u-input v-model="updateSpaceForm.location"></u-input>
          </u-form-item>
          <u-form-item label="场地大小" label-width="150rpx">
            <u-input type="number" v-model="updateSpaceForm.size"></u-input>
          </u-form-item>
          <u-form-item label="容纳人数" label-width="150rpx">
            <u-input v-model="updateSpaceForm.num"></u-input>
          </u-form-item>
                    <u-form-item label="容纳球队数量" label-width="200rpx">
            <u-input v-model="updateSpaceForm.teamNum"></u-input>
          </u-form-item>
          <u-button
            type="primary"
            shape="circle"
            :ripple="true"
            @click="updateSpace"
            >提交</u-button
          >
        </u-form>
      </view>
    </u-popup>
    <!-- 显示是否删除对话框 -->
    <u-popup v-model="deleteSpaceShow" mode="top">
      <view>
        <text>是否删除？</text>
        <view class="btn">
          <u-button type="primary" plain @click="deleteSpace">是</u-button>
        </view>
        <view class="btn">
          <u-button type="error" plain @click="deleteSpaceShow = false"
            >否</u-button
          >
        </view>
      </view>
    </u-popup>

    <!-- 显示toast提示 -->
    <u-toast ref="spaceToastRef" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      headStyle: {
        fontWeight: "800",
        fontSize: "30rpx",
        height: "100rpx",
      },
      addSpaceForm: {
        name: "",
        num: "",
        location: "",
        size: "",
        teamNum: "",
      },
      addSpaceFormRule: {
        name: [
          { required: true, message: "场地名称不能为空", change: true },
          { min: 3, max: 30, message: "名称长度在3-30字符之间", change: true },
        ],
        location: [
          { required: true, message: "场地所在地不能为空", change: true },
        ],
        num: [
          { required: true, message: "场地人数不能为空", change: true },
          { min: 1, max: 4, message: "容纳人数在1-9999之间", change: true },
        ],
        size: [
          { required: true, message: "场地大小不能为空", change: true },
          { min: 3, max: 5, message: "场地大小在3-5位数之间", change: true },
        ],
        teamNum: [
          { required: true, message: "容纳球队数量不能为空", change: true },
          {
            min: 1,
            max: 2,
            message: "容纳球队数目在1-2位数之间",
            change: true,
          },
        ],
      },
      addSpaceShow: false,
      updateSpaceShow: false,
      deleteSpaceShow: false,
      updateSpaceForm: {
        id: "",
        name: "",
        location: "",
        size: "",
        num: "",
        teamNum: ''
      },
      // 场地ID
      spaceId: -1,
      // 总条数
      total: -1,
      // 分页查询
      // 当前页码
      currentPage: 1,
      // 每页存放的数据
      size: 1,
      // 加载状态
      status: "loadmore",
    };
  },
  methods: {
    // 获取所有场地信息
    async getAllSpaces(currentPage, size) {
      const { data } = await this.$request({
        url: "/space/",
        data: {
          currentPage,
          size,
        },
      });
      // 获取总条数
      this.total = data.total;
      if (this.total === 0) {
        this.status = "nomore";
      }
      // 获取数组长度
      let len = this.list.length;
      if (len < this.total) {
        data.data.forEach((item) => {
          this.list.push(item);
        });
        if (this.list.length === this.total) {
          this.status = "nomore";
        }
      }
    },

    // 添加场地信息
    addSpace() {
      this.$refs.addSpaceFormRef.validate(async (valid) => {
        if (valid) {
          const { data } = await this.$request({
            url: "/space/",
            method: "post",
            data: this.addSpaceForm,
          });
          if (data.code === 200) {
            this.addSpaceShow = false;
            return uni.reLaunch({
              url: "/pages/space/index",
            });
          } else {
            return this.$refs.spaceToastRef.show({
              title: data.message,
              type: "error",
            });
          }
        } else {
          return this.$refs.spaceToastRef.show({
            title: "输入不合法，请重新输入！",
            type: "error",
          });
        }
      });
    },

    // 显示修改场地信息
    showUpdateSpace(item) {
      this.updateSpaceShow = true;
      this.updateSpaceForm = item;
    },

    // 修改场地信息
    async updateSpace() {
      const { data } = await this.$request({
        url: "/space/",
        method: "put",
        data: this.updateSpaceForm,
      });
      if (data.code === 200) {
        this.updateSpaceShow = false;
        return this.$refs.spaceToastRef.show({
          title: data.message,
          type: "success",
        });
      } else {
        return this.$refs.spaceToastRef.show({
          title: data.message,
          type: "error",
        });
      }
    },

    // 显示删除场地信息
    showDeleteSpace(id) {
      this.deleteSpaceShow = true;
      this.spaceId = id;
    },

    // 删除场地信息
    async deleteSpace() {
      let id = this.spaceId;
      const { data } = await this.$request({
        url: `/space/${id}`,
        method: "delete",
      });
      if (data.code === 200) {
        this.deleteSpaceShow = false;
        return uni.redirectTo({
          url: "/pages/space/index",
        });
      } else {
        return this.$refs.spaceToastRef.show({
          title: data.message,
          type: "error",
        });
      }
    },

    // 点击加载更多数据
    load() {
      if (this.currentPage >= this.total) return;
      this.status = "loading";
      this.currentPage = ++this.currentPage;
      setTimeout(() => {
        this.getAllSpaces(this.currentPage, this.size);
        if (this.currentPage >= this.total) this.status = "nomore";
        else this.status = "loadmore";
      }, 2000);
    },
  },

  onLoad() {
    this.getAllSpaces(this.currentPage, this.size);
  },

  onReady() {
    this.$refs.addSpaceFormRef.setRules(this.addSpaceFormRule);
  },
};
</script>

<style scoped lang="scss">
.wrap {
  padding: 15rpx 30rpx;

  .btn {
    width: 50%;
    margin-top: 15rpx;
    margin-left: auto;
    margin-right: auto;
  }

  .addSpaceForm {
    overflow: auto;
    height: 600rpx;
    padding: 35rpx 50rpx;
  }

  u-popup {
    view {
      padding: 10rpx 30rpx;

      text {
        font-weight: 800;
        font-size: 35rpx;
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>